<script setup lang='ts'>
import type { PlusFormGroupRow } from 'plus-pro-components'

const props = defineProps(['businessmodulelist', 'formparams', 'projectList', 'submitLoading', 'type'])
const emits = defineEmits(['close', 'submit', 'updateproject'])
const { businessmodulelist, formparams, projectList, submitLoading, type } = toRefs(props)
const typeEnum = {
    edit: '编辑',
} as const
const disable = computed(() => {
    return type?.value === typeEnum.edit
})
const group: PlusFormGroupRow[] = [
    {
        columns: [
            {
                label: '优惠券名称',
                prop: 'couponName',
                valueType: 'copy',
            },
            {
                label: '优惠券描述',
                prop: 'description',
                valueType: 'copy',
            },
            {
                fieldProps: {
                    disabled: disable.value,
                    min: 0,
                    precision: 0,
                },
                label: '发放数量',
                prop: 'issueQuantity',
                valueType: 'input-number',
            },
            {
                fieldProps: {
                    disabled: disable.value,
                },
                label: '业务板块',
                options: computed(() => {
                    return transformData(businessmodulelist?.value ?? [])
                }),
                prop: 'businessModule',
                valueType: 'cascader',
            },
            {
                label: '选择项目',
                prop: 'project',
            },
            {
                label: '使用门槛',
                prop: 'thresholdAmount',
            },
            {
                fieldProps: {
                    disabled: disable.value,
                    min: 0,
                    precision: 2,
                },
                label: '优惠金额',
                prop: 'discountAmount',
                valueType: 'input-number',
            },
            {
                label: '有效期',
                prop: 'validityPeriodType',
            },
            {
                label: '领取人群',
                prop: 'receivePopulation',
            },
            {
                label: '每人可领取数量',
                prop: 'receiveLimit',
            },
            {
                label: '单次可使用数量',
                prop: 'usageLimit',
            },
        ],
        title: '基础信息',
    },
    {
        columns: [
            {
                label: '过期提醒',
                prop: 'expirationReminder',
            },
            {
                fieldProps: {
                    autosize: { maxRows: 4, minRows: 2 },
                    showWordLimit: true,
                },
                label: '领取说明',
                prop: 'receiveInstructions',
                valueType: 'textarea',
            },
            {
                fieldProps: {
                    autosize: { maxRows: 4, minRows: 2 },
                    showWordLimit: true,
                },

                label: '优惠说明',
                prop: 'discountInstructions',
                valueType: 'textarea',
            },
            {
                fieldProps: {
                    autosize: { maxRows: 4, minRows: 2 },
                    showWordLimit: true,
                },
                label: '使用须知',
                prop: 'usageNotes',
                valueType: 'textarea',
            },
        ],

        title: '其他信息',
    },

]

function transformData(data: any[]) {
    if (data) {
        return data.map((item) => {
            const newItem: {
                children?: any[]
                label: string
                value: number | string
            } = {
                label: item.name,
                value: item.code,

            }
            if (item.children)
                newItem.children = transformData(item.children)

            return newItem
        })
    }
    return []
}

const cascaderprops = { multiple: true }
const list = computed(() => {
    return transformData(projectList?.value)
})

function changeCascader(value: any) {
    emits('updateproject', value)
}
</script>

<template>
    <div>
        <PlusForm v-model="formparams"
                  :group="group"
                  label-width="120"
        >
            <template #plus-field-project>
                <el-radio-group v-model="formparams.projectSelect"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                                :disabled="!(formparams.businessModule?.length > 0) || disable"
                >
                    <el-radio value="1">
                        全部项目
                    </el-radio>

                    <el-radio value="2">
                        部分项目 <el-cascader v-model="formparams.projectArr"
                                          :options="list"
                                          :props="cascaderprops"
                                          :disabled="formparams.projectSelect === '1' || disable"
                                          collapse-tags
                                          collapse-tags-tooltip
                                          clearable
                                          filterable
                                          @change="changeCascader"
                        />
                    </el-radio>
                </el-radio-group>
            </template>

            <template #plus-field-thresholdAmount>
                <el-radio-group v-model="formparams.thresholdAmount"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                                :disabled="disable"
                >
                    <el-radio value="1">
                        无门槛
                    </el-radio>

                    <el-radio value="2">
                        订单满 <el-input-number v-model="formparams.thresholdAmountNum"
                                             :min="0"
                                             :precision="0"
                                             :disabled="formparams.thresholdAmount === '1' || disable"
                        />
                        元可用
                    </el-radio>
                </el-radio-group>
            </template>

            <template #plus-field-validityPeriodType>
                <el-radio-group v-model="formparams.validityPeriodType"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                                :disabled="disable"
                >
                    <el-radio value="1">
                        <el-date-picker v-model="formparams.DateArr"
                                        type="daterange"
                                        range-separator="-"
                                        start-placeholder="请选择开始时间"
                                        end-placeholder="请选择结束时间"
                                        :disabled="formparams.validityPeriodType === '2' || disable"
                                        value-format="YYYY-MM-DD hh:mm:ss"
                        />
                    </el-radio>

                    <el-radio value="2">
                        领取后 <el-input-number v-model="formparams.validityDays"
                                             :min="0"
                                             :precision="0"
                                             :disabled="formparams.validityPeriodType === '1' || disable"
                        />
                        日可用
                    </el-radio>
                </el-radio-group>
            </template>

            <template #plus-field-receivePopulation>
                <el-radio-group v-model="formparams.receivePopulation"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                                :disabled="disable"
                >
                    <el-radio value="1">
                        全部会员
                    </el-radio>

                    <el-radio value="2">
                        会员等级 <el-input-number v-model="formparams.receivePopulationNum"
                                              :min="0"
                                              :precision="0"
                                              :disabled="formparams.receivePopulation === '1' || disable"
                        />
                        及以上可领取
                    </el-radio>
                </el-radio-group>
            </template>

            <template #plus-field-receiveLimit>
                <el-radio-group v-model="formparams.receiveLimit"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                                :disabled="disable"
                >
                    <el-radio value="1">
                        无限制
                    </el-radio>

                    <el-radio value="2">
                        最多可领取 <el-input-number v-model="formparams.receiveLimitNum"
                                               :min="0"
                                               :precision="0"
                                               :disabled="formparams.receiveLimit === '1' || disable"
                        />
                        张
                    </el-radio>
                </el-radio-group>
            </template>

            <template #plus-field-usageLimit>
                <el-radio-group v-model="formparams.usageLimit"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                                :disabled="disable"
                >
                    <el-radio value="1">
                        无限制
                    </el-radio>

                    <el-radio value="2">
                        最多可领取 <el-input-number v-model="formparams.usageLimitNum"
                                               :min="0"
                                               :precision="0"
                                               :disabled="formparams.usageLimit === '1' || disable"
                        />
                        张
                    </el-radio>
                </el-radio-group>
            </template>

            <template #plus-field-expirationReminder>
                <el-radio-group v-model="formparams.expirationReminder"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                                :disabled="disable"
                >
                    <el-radio value="1">
                        无限制
                    </el-radio>

                    <el-radio value="2">
                        距离到期前 <el-input-number v-model="formparams.expirationReminderNum"
                                               :min="0"
                                               :precision="0"
                                               :disabled="formparams.expirationReminder === '1' || disable"
                        />
                        天提醒
                    </el-radio>
                </el-radio-group>
            </template>

            <template #footer>
                <div>
                    <el-button @click="emits('close')">
                        关闭
                    </el-button>

                    <el-button type="primary"
                               :loading="submitLoading"
                               @click="emits('submit')"
                    >
                        提交
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </div>
</template>
